<template>
	<div class="login" :style="{ backgroundImage: `url(https://www.xiaomilaile.cn/uploads/allimg/20230210/5-230210163F5260.jpg)` }">
		<el-form class="login-form" :model="form" :rules="rules" ref="formRef">
			<h2>项目管理系统</h2>
			<el-form-item prop="username">
				<el-input v-model="form.username" placeholder="请输入用户名" />
			</el-form-item>
			<el-form-item prop="password">
				<el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
			</el-form-item>
			<el-form-item>
				<el-radio v-model="form.role" label="管理员">管理员</el-radio>
				<el-radio v-model="form.role" label="资料员">资料员</el-radio>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" class="login-btn" @click="toLogin(formRef)">登录</el-button>
				<!-- <el-button type="primary" class="login-btn" @click="toRegister">去注册</el-button> -->

				<el-button type="primary" class="login-btn" @click="toRegister" v-if="userStore?.getSystemConfig()?.changePassword"
					>忘记密码</el-button
				>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { onMounted, reactive, ref } from "vue";

import { getSystemConfigDetail, login } from "@/api/login";

import { useUserStore } from "@/stores/userStores";
import { useRouter } from "vue-router";
const userStore = useUserStore();
const router = useRouter();

const form = reactive({
	username: "",
	password: "",
	role: "ADMIN",
	// code: "",
	// // level: 2,
	// uuid: new Date().getTime(),
});

const formRef = ref();

const rules = {
	username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
	password: [{ required: true, message: "请输入密码", trigger: "blur" }],
	// code: [{required: true, message: "请输入验证码", trigger: "blur"}],
};

onMounted(() => {
	initSystemConfig();
});

const initSystemConfig = async () => {
	const res = await getSystemConfigDetail();

	userStore.setSystemConfig(res.data);
	console.log(userStore.getSystemConfig());
};
const toRegister = () => {
	router.push("/register");
};

function toLogin(formEl) {
	formEl.validate(async (valid) => {
		if (valid) {
			const res = await login(form);
			if (!res.success) {
				ElMessage.error(res.msg);
				return;
			}

			userStore.setToken(res.data.token);
			userStore.setUserInfo(res.data.user);
			if (res.data.user.role === "管理员") {
				// 是管理员,则进入管理页面
				userStore.setIsAdmin(true);
				await router.push("/admin");
				return;
			} else {
				await router.push("/clerk");
				return;
			}

			//await router.push("hot?tag=hot");
		} else {
			return false;
		}
	});
}
</script>

<style>
.el-dropdown {
	vertical-align: top;
}

.el-dropdown + .el-dropdown {
	margin-left: 15px;
}

.el-icon-arrow-down {
	font-size: 12px;
}

.login {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;

	background-size: cover;
	background-position: center;
}

.login-form {
	width: 400px;
	padding: 40px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0px 0px 10px #ccc;
	opacity: 1;
}

.login-form h2 {
	margin-bottom: 20px;
}

.captcha {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.captcha img {
	width: 150px;
	height: 50px;
	margin-right: 10px;
}

.captcha a {
	font-size: 14px;
	color: #333;
}
</style>
